<template>
	<view class="postReport">
		<view class="tab dis">
			<view class="tabItem" :class="tabId == 0 ? 'avtive' : ''" @click="changeTab(0)">
				<view class="tabName">待处理</view>
			</view>
			<view class="tabItem" :class="tabId == 1 ? 'avtive' : ''" @click="changeTab(1)">
				<view class="tabName">已处理</view>
			</view>
		</view>
		<view class="list p30" v-if="list.length > 0">
			<view class="item card p20" v-for="item in list" :key="item.id" @click="clickPost(item)">
				<view class="user dis">
					<view class="userImg">
						<image :src="item?.author.avatar" mode="aspectFill"></image>
					</view>
					<view class="userInfo dis">
						<view class="userName">
							<view class="name">{{ item?.author.nickname }}</view>
							<view class="tiem">{{ item.updateTime }}</view>
						</view>
						<view class="butAd" v-if="tabId == 0" @click.stop="openSheet(item.id)">管理</view>
					</view>
				</view>
				<view class="itemCon pt15">{{ item.content }}</view>
				<view class="conType dis pt15">
					<view class="school">{{ item.departmentName }}</view>
					<view class="type">{{ item.plateName }}</view>
				</view>
				<view class="risk pt15" v-if="item.reportReason">举报理由:{{ item.reportReason }}</view>
			</view>
			<!-- <view class="itemN card p20">
				<view class="itemCon">
					<view class="itemtop dis">
						<view class="topText">用户</view>
						<view class="topBut dis">
							<view class="userImg"></view>
							<view class="userName">灰灰</view>
						</view>
						<view class="topText">举报</view>
						<view class="topBut dis">
							<view class="userImg"></view>
							<view class="userName">灰灰</view>
						</view>
						<view class="topText">发表的</view>
						<view class="topBut">帖子</view>
					</view>
					<view class="itemP mT20">
						<view class="raw">原帖</view>
						保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取
					</view>
				</view>
				<view class="rejectReason pt15">驳回理由:rejectReason</view>
				<view class="butList dis pt15" v-if="tabId == 0">
					<view class="but succeedBut">通过</view>
					<view class="but errBut">驳回</view>
					<view class="but primaryBut">管理</view>
				</view>
				<view class="rejectReason pt15 errColor" v-if="tabId == 2">驳回理由:rejectReason</view>
			</view> -->
			<view class="noData">没有更多了</view>
		</view>
		<view class="noData" v-else>暂无数据</view>
	</view>
	<!-- 管理帖子 -->
	<up-action-sheet
		:actions="sheetOptions"
		:title="sheetTit"
		:show="sheetShow"
		:round="15"
		@select="selectSheet"
		:closeOnClickOverlay="true"
		@close="closeSheet"
		cancelText="取消"
	></up-action-sheet>
	<!-- 用户风险等级设置 -->
	<up-popup :show="riskShow" :round="10" mode="bottom" @close="closeRisk" @open="riskShowA">
		<view class="report riskClass">
			<view class="repTit">用户风险等级设置</view>
			<view class="repRadio p20">
				<up-radio-group v-model="riskVal" placement="column">
					<up-radio v-for="(item, index) in riskList" :key="index" :label="item.label" :name="item.name"></up-radio>
				</up-radio-group>
			</view>
			<view class="reportBut dis p20">
				<view class="butR" @click="riskOKFun">提交</view>
			</view>
		</view>
	</up-popup>
	<!-- 用户禁言 -->
	<up-popup :show="banShow" :round="10" mode="bottom" @close="closeBan" @open="banShowA">
		<view class="report riskClass">
			<view class="repTit">用户禁言</view>
			<view class="repRadio p20">
				<up-radio-group v-model="banVal" placement="row">
					<up-radio v-for="(item, index) in banList" :key="index" :label="item.label" :name="item.name"></up-radio>
				</up-radio-group>
			</view>
			<view class="reportVal p20">
				<textarea v-model="banValCon" placeholder="请输入禁言备注" />
			</view>
			<view class="repRadio p20">
				<up-radio-group v-model="banValT" placement="row">
					<up-radio v-for="(item, index) in banTiem" :key="index" :label="item.label" :name="item.name"></up-radio>
				</up-radio-group>
			</view>
			<view class="reportBut dis p20">
				<view class="butR" @click="banOKFun">提交</view>
			</view>
		</view>
	</up-popup>
	<!-- 驳回和删除 -->
	<up-popup :show="reportShow" :round="10" mode="bottom" @close="closeRep" @open="openRepA">
		<view class="report">
			<view class="repTit">帖子管理</view>
			<view class="repRadio p20">
				<up-radio-group v-model="radioVal" placement="row" @change="radioChange">
					<up-radio v-for="(item, index) in radiolist1" :key="index" :label="item.label" :name="item.name"></up-radio>
				</up-radio-group>
			</view>
			<view class="reportVal p20">
				<textarea v-model="reportVal" placeholder="请输入更多举报描述" />
			</view>
			<view class="reportBut dis p20">
				<view class="butR" @click="radioOk">提交</view>
			</view>
		</view>
	</up-popup>
	<up-modal title="提示" :show="showModal" contentTextAlign="center" confirmButtonShape="circle">
		<view class="slot_content dis">确定忽略该举报吗?</view>
		<template #confirmButton>
			<view class="modalBut dis">
				<view class="custom_btn nodeBut" @click="okDelmodal">取消</view>
				<view class="custom_btn" @click="okAddmodal">确定</view>
			</view>
		</template>
	</up-modal>
</template>

<script setup>
import { getAuditPostList, userRisk, userBan, deleteAuditPost, doIgnoreReport } from '@/config/api.js';
import { postAuditList1 } from '@/config/sheetOption.js';
import { ref } from 'vue';
import { onShow, onLoad, onReachBottom } from '@dcloudio/uni-app';
const schoolId = ref(0);
onLoad((options) => {
	schoolId.value = options.schoolId;
});
onShow(() => {
	initData();
});
// 管理帖子
const sheetType = ref(1);
const clickItem = ref(0);
const sheetShow = ref(false);
const sheetTit = ref('管理帖子');
const sheetOptions = ref([]);
const newItem = ref({});
const postId = ref(0);
const openSheet = (id) => {
	postId.value = id;
	sheetOptions.value = postAuditList1;
	sheetShow.value = true;
};
const selectSheet = (index) => {
	console.log(index);
	clickItem.value = index.id;
	const findItem = list.value.find((item) => item.id == postId.value);
	newItem.value = findItem;
	if (index.id == 7) {
		const userId = findItem.author.id;
		uni.navigateTo({
			url: `/post/user/adminEditUser?val=${userId}`
		});
		closeSheet();
	} else if (index.id == 4) {
		banShow.value = true;
	} else if (index.id == 5) {
		riskShow.value = true;
	} else if (index.id == 2) {
		reportShow.value = true;
	} else if (index.id == 8) {
		showModal.value = true;
	}
};
const closeSheet = () => {
	postId.value = 0;
	sheetShow.value = false;
	sheetOptions.value = [];
};

// 弹窗
const showModal = ref(false);
const okDelmodal = () => {
	showModal.value = false;
};
const okAddmodal = async () => {
	const res = await doIgnoreReport(postId.value);
	if (res.code == 0) {
		initData();
		okDelmodal();
	}
	uni.showToast({
		title: res.message,
		icon: 'none'
	});
};

// 删除该帖
const radiolist1 = ref([
	{ label: '广告营销', name: 1 },
	{ label: '色情低俗', name: 2 },
	{ label: '恐怖暴力', name: 3 },
	{ label: '政治相关', name: 4 },
	{ label: '恶意刷级', name: 5 },
	{ label: '传播谣言', name: 6 },
	{ label: '涉嫌欺诈', name: 7 },
	{ label: '辱骂攻击', name: 8 },
	{ label: '泄露他人隐私', name: 9 },
	{ label: '其他原因', name: 10 }
]);
const reportShow = ref(false);
const radioVal = ref(1);
const reportVal = ref('');
const closeRep = () => {
	reportShow.value = false;
	radioVal.value = 1;
	reportVal.value = '';
	postId.value = 0;
};
const openRep = (num) => {
	postId.value = num;
	reportShow.value = true;
};
const openRepA = () => {};
const radioChange = (val) => {
	console.log(val, '选中');
};
const radioOk = async () => {
	const id = newItem.value.id;
	const item = radiolist1.value.find((ele) => ele.name == radioVal.value);
	let deleteReasonVal = '';
	if (item.name == 10) {
		deleteReasonVal = reportVal.value;
	} else {
		deleteReasonVal = item.label + '。' + reportVal.value;
	}
	const data = {
		deleteReason: deleteReasonVal
	};
	deletePostFun(id, data);
};
// 删除该帖
const deletePostFun = async (id, data) => {
	const res = await deleteAuditPost(id, data);
	if (res.code == 0) {
		clickItem.value = 0;
		closeRep();
		uni.showToast({
			title: '删除成功',
			icon: 'none'
		});
		initData();
	} else {
		uni.showToast({
			title: res.message,
			icon: 'none'
		});
	}
};

// 禁言用户
const banList = ref([
	{ label: '违法论坛规范', name: '违法论坛规范' },
	{ label: '涉嫌广告推销', name: '涉嫌广告推销' },
	{ label: '发布违法信息', name: '发布违法信息' },
	{ label: '辱骂诽谤他人', name: '辱骂诽谤他人' },
	{ label: '侵犯他人权益', name: '侵犯他人权益' },
	{ label: '破坏产品生态', name: '破坏产品生态' },
	{ label: '对学校会产生负面舆论', name: '对学校会产生负面舆论' }
]);
const banTiem = ref([
	{ label: '一天', name: '1' },
	{ label: '一周', name: '7' },
	{ label: '一个月', name: '30' },
	{ label: '一年', name: '365' },
	{ label: '永久', name: '9999' }
]);
const banShow = ref(false);
const banVal = ref('违法论坛规范');
const banValT = ref('1');
const banValCon = ref('');
const banShowA = () => {};
const closeBan = () => {
	banShow.value = false;
	banVal.value = '违法论坛规范';
	banValT.value = '1';
	banValCon.value = '';
};
const banOKFun = async () => {
	const userId = newItem.value.author.id;
	const data = {
		type: 'bbs',
		banReason: banVal.value,
		banRemark: banValCon.value,
		banTime: banValT.value
	};
	let res = await userBan(userId, data);
	if (res.code == 0) {
		closeBan();
		uni.showToast({
			title: '操作成功',
			icon: 'none'
		});
	} else {
		uni.showToast({
			title: res.message,
			icon: 'none'
		});
	}
};

// 用户风险等级设置
const riskList = ref([
	{ label: '正常', name: '0' },
	{ label: '发帖受控', name: 'controlled_thread' },
	{ label: '评论受控', name: 'controlled_post' },
	{ label: '发帖、评论受控', name: 'controlled_thread_post' },
	{ label: '发帖、评论受控且不再审核', name: 'controlled_thread_post_no_review' },
	{ label: '禁止访问', name: '403' }
]);
const riskShow = ref(false);
const riskVal = ref('0');
const riskShowA = () => {};
const closeRisk = () => {
	riskShow.value = false;
	riskVal.value = '0';
};
const riskOKFun = async () => {
	const userId = newItem.value.author.id;
	const data = {
		type: 'bbs',
		riskStatus: riskVal.value
	};
	const res = await userRisk(userId, data);
	if (res.code == 0) {
		closeRisk();
		uni.showToast({
			title: '操作成功',
			icon: 'none'
		});
	} else {
		uni.showToast({
			title: res.message,
			icon: 'none'
		});
	}
};

// 获取列表
const list = ref([]);
const pageNum = ref(1);
const pageSize = ref(20);
const total = ref(0);
const initData = () => {
	list.value = [];
	pageNum.value = 1;
	pageSize.value = 20;
	total.value = 0;
	getList();
};
const getList = async () => {
	const data = {
		pageNum: pageNum.value,
		pageSize: pageSize.value,
		isHandled: tabId.value
	};
	const res = await getAuditPostList(2, data);
	console.log(res.data.pageInfo.list);
	if (res.code == 0) {
		total.value = res.data.pageInfo.total;
		list.value = [...list.value, ...res.data.pageInfo.list];
	}
};
onReachBottom(() => {
	if (list.value.length >= total.value) {
		console.log('没有更多内容了');
	} else {
		pageNum.value++;
		getList();
	}
});
// 点击帖子
const clickPost = (item) => {
	// console.log(item)
	uni.navigateTo({
		url: `/post/post/postDetails?id=${item.threadId}`
	});
};

// tab切换
const tabId = ref(0);
const changeTab = (num) => {
	tabId.value = num;
	initData();
};
</script>

<style scoped lang="scss">
.postReport {
	width: 100%;
	.tab {
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 26rpx;
		background-color: #fff;
		.tabItem {
			// width: 120rpx;
			text-align: center;
			color: #656565;
		}
		.avtive {
			position: relative;
			color: #000;
			font-weight: 700;
			font-size: 30rpx;
		}
		.avtive::after {
			position: absolute;
			bottom: 0;
			left: 50%;
			display: block;
			content: '';
			width: 45rpx;
			height: 8rpx;
			border-radius: 8rpx;
			background: #179bf1;
			transform: translateX(-60%);
		}
	}
	.list {
		width: 100%;
		.item {
			width: 100%;
			.user {
				align-items: center;
				.userImg {
					margin-right: 15rpx;
					width: 75rpx;
					height: 75rpx;
					border-radius: 50%;
					overflow: hidden;
					background-color: #179bf1;
				}
				.userInfo {
					flex: 1;
					justify-content: space-between;
					align-items: center;
					.userName {
						.name {
							font-size: 28rpx;
						}
						.tiem {
							font-size: 24rpx;
							color: #888;
						}
					}
					.butAd {
						padding: 5rpx 15rpx;
						font-size: 26rpx;
						color: #1b9aee;
						border: 2rpx solid #1b9aee;
						border-radius: 10rpx;
					}
				}
			}
			.itemCon {
				font-size: 28rpx;
			}
			.conType {
				font-size: 26rpx;
				.school {
					margin-right: 20rpx;
					padding: 5rpx 15rpx;
					color: #fff;
					background: #1b9aee;
					border-radius: 10rpx;
				}
				.type {
					padding: 5rpx 15rpx;
					color: #333;
					background-color: #f8f8f8;
					border-radius: 10rpx;
				}
			}
			.risk {
				margin-top: 15rpx;
				border-top: 2rpx solid #eee;
				font-size: 26rpx;
			}
		}
		.itemN {
			width: 100%;
			.itemCon {
				.itemtop {
					align-items: center;
					font-size: 24rpx;
					.topText {
						color: #161616;
					}
					.topBut {
						align-items: center;
						margin: 0rpx 10rpx;
						padding: 5rpx 15rpx;
						color: #6686c8;
						border: 2rpx solid #5e83c2;
						background: #ebf5ff;
						border-radius: 10rpx;
						.userImg {
							margin-right: 10rpx;
							width: 45rpx;
							height: 45rpx;
							border-radius: 50%;
							overflow: hidden;
							background: #f7f7f7;
						}
					}
				}
				.itemP {
					position: relative;
					line-height: 40rpx;
					font-size: 26rpx;
					text-indent: 100rpx;
					.raw {
						position: absolute;
						top: 0rpx;
						left: 0rpx;
						width: 75rpx;
						height: 40rpx;
						line-height: 40rpx;
						font-size: 24rpx;
						text-align: center;
						background: #3b83eb;
						color: #fff;
						text-indent: 0rpx;
					}
				}
			}
			.butList {
				justify-content: space-around;
				align-items: center;
				width: 100%;
				.but {
					width: 20%;
					line-height: 55rpx;
					font-size: 24rpx;
					border-radius: 27.5rpx;
					text-align: center;
				}
			}
			.rejectReason {
				font-size: 24rpx;
			}
		}
	}
}
/* 驳回 */
.report {
	width: 100%;
	.repTit {
		width: 100%;
		line-height: 80rpx;
		text-align: center;
	}
	.reportVal {
		margin: auto;
		width: 90%;
		height: 150rpx;
		border-radius: 15rpx;
		background-color: #f3f3f3;
		textarea {
			width: 100%;
			height: 100%;
		}
	}
	.reportBut {
		justify-content: flex-end;
		width: 100%;
		.butR {
			width: 110rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 30rpx;
			text-align: center;
			font-size: 26rpx;
			color: #fff;
			background-color: #1b9aee;
		}
	}
}
.slot_content {
	width: 100%;
	text-align: center;
}
.modalBut {
	align-items: center;
	justify-content: space-around;
	width: 100%;
	.custom_btn {
		width: 40%;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 35rpx;
		text-align: center;
		color: #fff;
		background-color: #3391e6;
	}
	.nodeBut {
		color: #515151;
		background-color: #f0f0f0;
	}
}
</style>
<style>
page {
	background-color: #f7f7f7;
}
image {
	width: 100%;
	height: 100%;
}
.card {
	margin-bottom: 20rpx;
	background-color: #fff;
	border-radius: 15rpx;
}
.noData {
	width: 100%;
	line-height: 90rpx;
	color: #999;
	text-align: center;
	background-color: #f7f7f7;
}
.mT20 {
	margin-top: 20rpx;
}
</style>
